// 合作机构大屏图表配置

// 图表数据
const chartData = {
    typeDistribution: [
        { name: '汉服品牌企业', value: 65, percentage: 41.7, activity: 4.3 },
        { name: '文化社团组织', value: 48, percentage: 30.8, activity: 4.5 },
        { name: '教育科研机构', value: 22, percentage: 14.1, activity: 3.9 },
        { name: '媒体传播平台', value: 21, percentage: 13.4, activity: 4.2 }
    ],
    topOrgs: [
        { name: '华夏汉服文化发展公司', type: '品牌企业', projects: 18 },
        { name: '全国汉服文化协会', type: '社团组织', projects: 15 },
        { name: '汉服研究院', type: '教育科研', projects: 12 },
        { name: '古风文化传播平台', type: '媒体平台', projects: 10 },
        { name: '锦绣汉服品牌', type: '品牌企业', projects: 9 }
    ]
};

// 初始化机构类型分布图表
function initTypeDistributionChart() {
    const chartDom = document.getElementById('typeDistributionChart');
    const myChart = echarts.init(chartDom);
    
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params) {
                const data = chartData.typeDistribution[params[0].dataIndex];
                return `${data.name}<br/>
                        数量: ${data.value} 家<br/>
                        占比: ${data.percentage}%<br/>
                        合作活跃度: ${data.activity}/5.0`;
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                color: '#ffffff'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        yAxis: {
            type: 'category',
            data: chartData.typeDistribution.map(item => item.name),
            axisLabel: {
                color: '#ffffff'
            }
        },
        series: [{
            name: '机构数量',
            type: 'bar',
            data: chartData.typeDistribution.map(item => item.value),
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: '#8b5cf6' },
                    { offset: 1, color: '#ec4899' }
                ])
            },
            label: {
                show: true,
                position: 'right',
                color: '#ffffff',
                formatter: '{c} 家'
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#a78bfa' },
                        { offset: 1, color: '#f472b6' }
                    ])
                }
            }
        }]
    };
    
    myChart.setOption(option);
    
    // 响应式调整
    window.addEventListener('resize', function() {
        myChart.resize();
    });
    
    return myChart;
}

// 初始化主要合作机构榜单图表
function initTopOrgsChart() {
    const chartDom = document.getElementById('topOrgsChart');
    const myChart = echarts.init(chartDom);
    
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params) {
                const data = chartData.topOrgs[params[0].dataIndex];
                return `${data.name}<br/>
                        类型: ${data.type}<br/>
                        合作项目数: ${data.projects} 个`;
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                color: '#ffffff'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        yAxis: {
            type: 'category',
            data: chartData.topOrgs.map(item => item.name),
            axisLabel: {
                color: '#ffffff',
                fontSize: 12
            }
        },
        series: [{
            name: '合作项目数',
            type: 'bar',
            data: chartData.topOrgs.map(item => item.projects),
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: '#4c1d95' },
                    { offset: 1, color: '#8b5cf6' }
                ])
            },
            label: {
                show: true,
                position: 'right',
                color: '#ffffff',
                formatter: '{c} 个'
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#6d28d9' },
                        { offset: 1, color: '#a78bfa' }
                    ])
                }
            }
        }]
    };
    
    myChart.setOption(option);
    
    // 响应式调整
    window.addEventListener('resize', function() {
        myChart.resize();
    });
    
    return myChart;
}

// 更新核心指标
function updateIndicators(period) {
    // 这里可以根据不同时间周期更新指标数据
    // 目前使用模拟数据
    const indicators = document.querySelectorAll('.indicator-card .value');
    const changes = document.querySelectorAll('.indicator-card .change');
    
    // 模拟不同时间周期的数据
    const periodData = {
        '30': [
            { value: '156 家', change: '同比增长 28.7%' },
            { value: '24 家', change: '环比增长 18.5%' },
            { value: '432 个', change: '同比增长 35.2%' },
            { value: '2.77 个', change: '同比增长 5.1%' }
        ],
        '90': [
            { value: '425 家', change: '同比增长 31.2%' },
            { value: '58 家', change: '环比增长 21.3%' },
            { value: '1128 个', change: '同比增长 37.8%' },
            { value: '2.65 个', change: '同比增长 4.8%' }
        ],
        '365': [
            { value: '1268 家', change: '同比增长 42.5%' },
            { value: '189 家', change: '环比增长 23.7%' },
            { value: '3456 个', change: '同比增长 41.3%' },
            { value: '2.72 个', change: '同比增长 6.2%' }
        ]
    };
    
    const data = periodData[period];
    indicators.forEach((indicator, index) => {
        indicator.textContent = data[index].value;
    });
    changes.forEach((change, index) => {
        change.textContent = data[index].change;
    });
}

// 更新图表数据
function updateCharts(period) {
    // 这里可以根据不同时间周期更新图表数据
    // 目前使用模拟数据，实际应用中可以根据需要扩展
}

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', function() {
    // 初始化图表
    const typeChart = initTypeDistributionChart();
    const topOrgChart = initTopOrgsChart();
    
    // 时间周期切换事件
    document.querySelectorAll('.time-filter span').forEach(span => {
        span.addEventListener('click', function() {
            // 移除所有active类
            document.querySelectorAll('.time-filter span').forEach(s => s.classList.remove('active'));
            // 添加当前active类
            this.classList.add('active');
            
            const period = this.getAttribute('data-period');
            updateIndicators(period);
            updateCharts(period);
            
            // 重新渲染图表
            typeChart.setOption(typeChart.getOption());
            topOrgChart.setOption(topOrgChart.getOption());
        });
    });
    
    // 默认显示30天数据
    updateIndicators('30');
});